<script setup lang="ts">

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: '门'
  }
})
</script>

<template>
  <div class="element-icon">
    <img class="icon-img" :src="props.icon" :alt="props.label"/>
    <text class="icon-text">{{ props.label }}</text>
  </div>

</template>

<style scoped lang="scss">
.element-icon {
  margin: 16px 0 0 0;
  width: 88px;
  height: 88px;
  background: #DEE9FF;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #555A7A;
  cursor: pointer;

  .icon-img {
    height: 36px;
  }

  .icon-text {
    margin-top: 4px;
    font-size: 14px;
  }
}
</style>
